'use client';

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import Navigation from '@/components/Navigation';
import Link from 'next/link';
import { useLocale } from 'next-intl';
import { AnimatedElement } from '@/components/AnimatedSection';

export default function HomePage() {
  const t = useTranslations('home');
  const locale = useLocale();

  return (
    <>
      <Navigation />

      {/* Hero Section - Enhanced with more breathing room */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50">
        {/* Animated Background with larger blur */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-full">
            <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-gradient-to-br from-blue-300 to-blue-100 rounded-full mix-blend-multiply filter blur-[150px] opacity-30 animate-blob"></div>
            <div className="absolute top-1/3 right-1/4 w-[500px] h-[500px] bg-gradient-to-br from-purple-300 to-purple-100 rounded-full mix-blend-multiply filter blur-[150px] opacity-30 animate-blob animation-delay-2000"></div>
            <div className="absolute bottom-1/4 left-1/2 w-[500px] h-[500px] bg-gradient-to-br from-indigo-300 to-indigo-100 rounded-full mix-blend-multiply filter blur-[150px] opacity-30 animate-blob animation-delay-4000"></div>
          </div>

          {/* Subtle Grid Pattern */}
          <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:24px_24px]"></div>
        </div>

        {/* Hero Content with generous spacing */}
        <div className="relative z-10 max-w-4xl mx-auto px-8 sm:px-16 lg:px-20 text-center py-32 md:py-40 lg:py-52">
          <AnimatedElement variant="fadeInUp" className="mb-16 sm:mb-24">
            <div className="inline-flex items-center justify-center px-10 py-4 bg-gradient-to-r from-blue-600/10 to-purple-600/10 rounded-full border border-blue-200/50 shadow-sm">
              <span className="text-base font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                ✨ {t('hero.subtitle')}
              </span>
            </div>
          </AnimatedElement>

          <AnimatedElement variant="fadeInUp" className="mb-16 sm:mb-24">
            <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight tracking-tight">
              <span className="bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
                {t('hero.title')}
              </span>
            </h1>
          </AnimatedElement>

          <AnimatedElement variant="fadeInUp" className="mb-20 sm:mb-32">
            <p className="text-2xl sm:text-3xl md:text-4xl font-semibold text-gray-800 leading-relaxed">
              {t('hero.subtitle')}
            </p>
          </AnimatedElement>

          <AnimatedElement variant="fadeInUp" className="mb-28 max-w-xl mx-auto">
            <p className="text-lg sm:text-xl text-gray-600 leading-relaxed tracking-wide">
              {t('hero.description')}
            </p>
          </AnimatedElement>

          <AnimatedElement variant="fadeInUp" className="mt-20">
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <Link
                href={`/${locale}/solutions`}
                className="inline-flex items-center justify-center px-8 py-2.5 bg-blue-500 text-white text-xs font-normal rounded-md hover:bg-blue-600 transition-all duration-300 shadow-sm w-full sm:w-auto"
              >
                查看方案
              </Link>

              <Link
                href={`/${locale}/about`}
                className="inline-flex items-center justify-center px-8 py-2.5 bg-white text-gray-600 text-xs font-normal rounded-md border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-all duration-300 w-full sm:w-auto"
              >
                {t('hero.cta')}
              </Link>
            </div>
          </AnimatedElement>
        </div>

        {/* Scroll Indicator with more spacing */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1, duration: 1 }}
          className="absolute bottom-16 left-1/2 transform -translate-x-1/2"
        >
          <div className="flex flex-col items-center gap-3 animate-bounce">
            <span className="text-sm text-gray-500">向下滚动</span>
            <svg className="w-6 h-6 text-gray-400" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
              <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
            </svg>
          </div>
        </motion.div>
      </section>

      {/**技术架构方案展示 */}
      <section className='relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50'>
        {/**背景装饰 */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-full">
            <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-gradient-to-br from-blue-300 to-blue-100 rounded-full mix-blend-multiply filter blur-[150px] opacity-30 animate-blob"></div>
            <div className="absolute top-1/3 right-1/4 w-[500px] h-[500px] bg-gradient-to-br from-purple-300 to-purple-100 rounded-full mix-blend-multiply filter blur-[150px] opacity-30 animate-blob animation-delay-2000"></div>
            <div className="absolute bottom-1/4 left-1/2 w-[500px] h-[500px] bg-gradient-to-br from-indigo-300 to-indigo-100 rounded-full mix-blend-multiply filter blur-[150px] opacity-30 animate-blob animation-delay-4000"></div>
          </div>

          {/* Subtle Grid Pattern */}
          <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:24px_24px]"></div>
        </div>

        {/**内容区域 */}
        <div className="relative z-10 max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
          <div className="grid lg:grid-cols-2 gap-16 lg:gap-20 items-center">
            {/* 左侧内容区域 - 平台特性和优势 */}
            <AnimatedElement variant="slideInLeft" className="space-y-8">
              <div className="space-y-6">
                <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
                  高性能云平台<br />
                  <span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">架构设计</span>
                </h2>
                
                <p className="text-base sm:text-lg text-gray-600 leading-relaxed">
                  采用先进的云原生架构，支持百万级设备接入，保障系统稳定可靠运行，提供卓越的用户体验。
                </p>
              </div>
              
              {/* 特性卡片列表 - 按照设计稿样式 */}
              <div className="space-y-3">
                {[
                  {
                    icon: '🌊',
                    title: '10万级并发',
                    description: '支持10万级设备同时在线，满足大规模部署需求'
                  },
                  {
                    icon: '⏱️',
                    title: '毫秒级响应',
                    description: '控制指令响应时间小于3秒，状态同步小于1秒'
                  },
                  {
                    icon: '✅',
                    title: '99.9%可用',
                    description: '多地域部署，自动故障转移，保障服务高可用'
                  },
                  {
                    icon: '🔔',
                    title: '安全可靠',
                    description: '端到端加密，完整的安全审计，保障数据安全'
                  }
                ].map((feature, index) => (
                  <AnimatedElement
                    key={index}
                    variant="slideInLeft"
                    delay={index * 0.1}
                    className="group"
                  >
                    <div className="flex items-center gap-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100">
                      <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-lg">
                        {feature.icon}
                      </div>
                      <div className="flex-1">
                        <h3 className="text-base font-semibold text-gray-900 mb-1">
                          {feature.title}
                        </h3>
                        <p className="text-sm text-gray-600 leading-relaxed">
                          {feature.description}
                        </p>
                      </div>
                    </div>
                  </AnimatedElement>
                ))}
              </div>
            </AnimatedElement>

            {/* 右侧架构图 - 四层架构展示 */}
            <AnimatedElement variant="slideInRight" className="relative">
              <div className="relative w-full max-w-lg mx-auto">
                {/* 白色背景卡片容器 */}
                <div className="bg-white rounded-lg p-4 shadow-sm min-h-[500px] flex justify-center items-center">
                  {/* 四层架构  黑色容器div*/}
                  <div className="bg-black rounded-lg p-4 w-80 min-h-[400px] flex flex-col justify-center">
                    <div>
                      {/* 应用层 */}
                      <div className="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg p-5 shadow-lg" style={{marginBottom: '32px'}}>
                        <h3 className="text-lg font-bold text-white mb-4">应用层</h3>
                        <div className="flex gap-3">
                          {['用户管理', '设备管理', '数据分析'].map((item, index) => (
                            <div key={index} className="bg-white rounded-lg px-4 py-3 flex-1 text-center shadow-sm">
                              <span className="text-sm font-medium text-blue-800">{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* 服务层 */}
                      <div className="bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg p-5 shadow-lg" style={{marginBottom: '32px'}}>
                        <h3 className="text-lg font-bold text-white mb-4">服务层</h3>
                        <div className="flex gap-3">
                          {['API服务', '消息服务', '推送服务'].map((item, index) => (
                            <div key={index} className="bg-white rounded-lg px-4 py-3 flex-1 text-center shadow-sm">
                              <span className="text-sm font-medium text-purple-800">{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* 平台层 */}
                      <div className="bg-gradient-to-r from-pink-500 to-red-500 rounded-lg p-5 shadow-lg" style={{marginBottom: '32px'}}>
                        <h3 className="text-lg font-bold text-white mb-4">平台层</h3>
                        <div className="flex gap-3">
                          {['设备接入', '数据处理', 'AI分析'].map((item, index) => (
                            <div key={index} className="bg-white rounded-lg px-4 py-3 flex-1 text-center shadow-sm">
                              <span className="text-sm font-medium text-pink-800">{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* 基础设施层 */}
                      <div className="bg-gradient-to-r from-red-500 to-red-600 rounded-lg p-5 shadow-lg">
                        <h3 className="text-lg font-bold text-white mb-4">基础设施层</h3>
                        <div className="flex gap-3">
                          {['容器云', '数据库', '缓存'].map((item, index) => (
                            <div key={index} className="bg-white rounded-lg px-4 py-3 flex-1 text-center shadow-sm">
                              <span className="text-sm font-medium text-red-800">{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </AnimatedElement>
          </div>
        </div>

      </section>
    </>
  );
}

